<template>
  <div class="mainList">
    <div class="searchMain">
      <div class="searchPos" :class="{'boxShow': searchHide}">
        <a-form ref="formSearchRef" :model="formSearch" v-if="columnsDistShow">
          <div class="form-main" :class="{'searchHide': searchHide}">
            <div class="form-item">
              <a-form-item field="address_id" label="目的地" label-col-flex="90px" class="searchTop-list">
                <a-select v-model="formSearch.address_id" :max-tag-count="1"
                          :options="columnsDist.dicthelpApi_addressChang.data"
                          :field-names="{ value: 'value', label: 'label' }"
                          placeholder="请选择目的地" allow-clear allow-search :virtual-list-props="{height:200}">
                </a-select>
              </a-form-item>
            </div>
            <div class="form-buttom">
              <div>
                <a-button type="primary" html-type="submit" @click="submitSearch" style="margin-right: 10px;">
                  <template #icon>
                    <icon-search/>
                  </template>
                  搜索
                </a-button>
                <a-button @click="resetSearch">
                  <template #icon>
                    <icon-delete/>
                  </template>
                  重置
                </a-button>
              </div>
            </div>
          </div>

          <div class="touHide" style="display: flex;justify-content: center;margin-bottom: 10px;">
            <a-link v-if="searchHide" @click="searchHide=!searchHide" size="small">
              {{ searchHide ? '收起' : '' }}
              <template #icon>
                <icon-up v-if="searchHide"/>
              </template>
            </a-link>
          </div>
        </a-form>
      </div>
    </div>
  
    <div class="ma-content-block justify-between p-4 mainTable">
      <div style="padding: 0 20px;" v-auth="['sea:waybillTrayList:totalExecl']">
        <a-button type="secondary" @click="listTap">
          <template #icon>
              <icon-download/>
          </template>
            导出
        </a-button>
      </div>
 
      <a-list :gridProps="{ gutter: 0, span: 6 }" :bordered="false" style="height:75vh">
        <a-list-item v-for="status in shipmentTabs">
          <a-list :loading="status.loading" >
            <template #header>
              <a-row class="table-title">{{ status.title }}</a-row>
              <a-row justify="space-between">
                <a-col :flex="8">目的地</a-col>
                <a-col :flex="8" class="flex justify-center">箱数</a-col>
                <a-col :flex="8" class="flex justify-center">托盘</a-col>
              </a-row>
            </template>
            <div style="overflow: auto;height:62vh" class="ovst">
              <a-list-item v-for="record in status.dataList">
              <a-row justify="space-between">
                <a-col :flex="8">{{ record.address_desc }}</a-col>
                <a-col :flex="8" class="flex justify-center">
                  <a-link title="箱数"
                          @click="tableTap(record,1,status.key)">{{ record?.parcel_count_stay ?? '-' }}
                  </a-link>
                </a-col>
                <a-col :flex="8" class="flex justify-center">
                  <div v-if="record && status.key=='6'">{{ record?.tray_count_stay }}</div>
                  <a-link title="托盘数" v-else-if="record"
                          @click="tableTap(record,2,status.key)">{{ record?.tray_count_stay }}
                  </a-link>
                </a-col>
              </a-row>
            </a-list-item>
            <div style="margin-top: 30px;text-align: center;" v-if="status.dataList==''">
              暂无数据
            </div>

            </div>
           
          </a-list>
        </a-list-item>
      </a-list>
      <a-drawer v-model:visible="visiblewayTable" width="80%" :footer="false">
        <template #title>
          <div>入库</div>
        </template>
        <listway-table ref="listwayTableRef" @addClick="refreshData"></listway-table>
      </a-drawer>
      <a-drawer v-model:visible="visibleTable" width="80%" :footer="false" @cancel="close">
        <template #title>
          <div>运单</div>
        </template>
        <list-table ref="listTableRef" @addClick="refreshData"></list-table>
      </a-drawer>
      <a-drawer v-model:visible="visibleTrayTable" width="80%" :footer="false">
        <template #title>
          <div>托盘列表</div>
        </template>
        <tray-list-table ref="trayListTableRef" @addClick="refreshData"></tray-list-table>
      </a-drawer>
    </div>
      <!-- //导出 -->
  <a-modal v-model:visible="modelVisible" title="导出" v-if="modelVisible">
        <a-form :model="formData" auto-label-width >
            <a-form-item label="状态" validate-trigger="change" field="car_id">
                <a-select v-model="formData.type_status"
                placeholder="请选择状态" allow-clear allow-search>
                <a-option v-for="item in shipmentTabs" :value="item.key" :key="item.key">{{item.title}}</a-option>
              </a-select>
              </a-form-item>
         </a-form> 
         <template #footer>
          <div style="display: flex; justify-content: space-between;align-items: center;">
            <div style="color: rgb(50 193 148);">
            </div>
            <div>
              <a-button @click="handleCancel()" style="margin-right: 20px;">关闭</a-button>
              <a-button type="primary" @click="handleOk(formCarRef)">
                保存
              </a-button>
            </div>
          </div>
        </template>
      </a-modal>
  </div>

</template>
<script setup>
import {ref, reactive, onMounted} from 'vue'
import listwayTable from "@/views/abroad/waybill/index.vue";
import listTable from "@/views/abroad/waybillList/index.vue";
import TrayListTable from "@/views/abroad/waybillTrayList/index.vue";
import common from "@/api/common.js";
import dicthelpApi from "@/api/dicthelpApi.js";
import waybillTrayList from "@/api/abroad/waybillTrayList.js";
import {Message} from '@arco-design/web-vue'
import tool from '@/utils/tool'

const selected = ref([])
const columnsDistShow = ref(false)
const visibleTable = ref(false)
const visiblewayTable = ref(false)
const listTableRef = ref()
const listwayTableRef = ref()
const visibleTrayTable = ref(false)
const trayListTableRef = ref()
const shipmentTabs = ref([
  {key: '6', title: '待接收', page: 0},
  {key: '1', title: '未分配', page: 0},
  {key: '2', title: '待装车', page: 0},
  {key: '3', title: '已装车', page: 0},
])//tabs赋值
const tableRef = ref()
const tablePrantRef = ref() //tabel 父级高度
const loading = ref(false)
const settingRef = ref()
const columnsDist = ref([])
const formSearchRef = ref(null)
const modelVisible=ref(false)
const formData=ref({
  type_status:''
})

//搜索更多是否显示
const searchHide = ref(false)
//箱数跳转
const tableTap = (record, type, status) => {
  if (type == 1) {
    if(status==6){
      visiblewayTable.value = true
      listwayTableRef.value.open(record.address_id, status)
    }else{
      visibleTable.value = true
      listTableRef.value.open(record.address_id, status)
    }
    
  } else if (type == 2) {
    visibleTrayTable.value = true
    trayListTableRef.value.open(record.address_id, status)
  }
}
//关闭运单
const close = () => {
  listTableRef.value.selected=[]
}
//导出
const listTap=()=>{
  modelVisible.value=true
}
//确定导出
const handleOk = () => {
  if(formData.value.type_status==''){
    Message.error('请选择状态')
    return false
  }
  waybillTrayList.totalExecl(formData.value).then(res => {
    tool.download(res)
    Message.success('请求成功，文件开始下载')
    handleCancel()
  })
}
//关闭导出
const handleCancel = () => {
  modelVisible.value=false
  formData.value.type_status=''
}

//列表请求数据
const formSearch = reactive({
  address_id: '',
  scence: "total",
  // page: 1,
  pageSize: 10,
  // type_status: '2',
})



//重置
const resetSearch = (e) => {
  formSearchRef.value.resetFields();
  console.log('formSearch', formSearch)
  refreshData()
}
//搜索
const submitSearch = (e) => {
  formSearch.page = 1
  // formSearch.refresh_tabs=1
  searchHide.value = false
  refreshData()
}

const getDataList = async (shipmentTab, pageAdd = false) => {
  if (shipmentTab.loading) {
    return
  }
  shipmentTab.page = pageAdd ? ++shipmentTab.page : 1;
  let searchData = Object.assign({type_status: shipmentTab.key, page: shipmentTab.page}, formSearch)
  shipmentTab.loading = true
  let res = await waybillTrayList.list(searchData)
  shipmentTab.loading = false
  if (pageAdd && !res.data.length) {
    shipmentTab.page--
    return;
  }
  if (pageAdd) {
    shipmentTab.dataList = shipmentTab.dataList?.concat(res.data) ?? res.data
  } else {
    shipmentTab.dataList = res.data
  }
}

const refreshData = () => {
  for (const shipmentTabsKey in shipmentTabs.value) {
    getDataList(shipmentTabs.value[shipmentTabsKey])
  }
}
onMounted(() => {
  refreshData()
  waybillColumns().then(res => {
    console.log('jjjjjjjjjjjj', res)
    columnsDist.value = res
    columnsDistShow.value = true
  })
})

//字典
const waybillColumns = async () => {
  let [
    dicthelpApi_addressChang,
  ] = await Promise.all([
    dicthelpApi.addressChang(0),
  ])
  return reactive({
    dicthelpApi_addressChang,
  })
}
</script>
<script> export default {name: 'sea:statistics'} </script>
<style>
.mainTable {
  padding-top: 68px;
}

.arco-select-view-inner .arco-tag {
  white-space: nowrap !important;
}
.table-title{
  text-align: center;
  background: rgb(84 134 249);
  color: #fff;
  display: block;
  padding: 6px 0;
  margin-bottom: 6px;
  border-radius: 4px;
}
.arco-list-header{
  padding:0 0 20px 0 !important;
}
.ovst{
  scrollbar-width: thin; /* 对于支持该属性的浏览器 */
  scrollbar-color: #999 #eee; /* 滚动条的颜色，前景和背景 */
}

</style>